<template>
	<div >
		<h1>当前求和为:{{countAbout.sum}}</h1>
		<!-- <h3>当前求和放大十倍为:{{bigSum}}</h3> -->
		<h3>我在{{countAbout.school}},学习{{countAbout.subject}}</h3>
		<h4 style="color: #000FFF;">Person组件总人数:{{personAbout.personList.length}}</h4>
		<ul>
			<li v-for="p in personAbout.personList" :key="p.id">{{p.name}}</li>
		</ul>
		<!-- 强制网number转换 -->
		<select v-model.number="n">
			<!-- 加了: 之后变成js表达式，解析后就是纯粹的数字 -->
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button type="button" @click='increment(n)'>+</button>
		<button type="button" @click='decrement(n)'>-</button>
		<button type="button" @click='jiaOdd(n)'>当前求和为奇数再加</button>
		<button type="button" @click='jiaWait(n)'>等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapMutations,mapActions} from 'vuex'
	
	export default{
		name:'Count',
		data(){
			return{
				// 用户选择数字
				n:1,
			}
		},
		computed:{
			
			// es6的扩展运算符
			// 借助 mapState生成计算属性，从state中读取属性(对象写法)
			// ...mapState({sum:'sum',school:'school',subject:'subject'}),
			// 借助 mapState生成计算属性，从state中读取属性(数组写法)
			...mapState(['countAbout','personAbout']),
			
			// 借助 mapGetters生成计算属性，从getter中读取属性(对象写法)
			// ...mapGetters({bigSum:'bigSum'}),
			// 借助 mapGetters生成计算属性，从getter中读取属性(数组写法)
			// ...mapGetters(['bigSum']),
			
		},
		methods:{
			// 借助 mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations({increment:'JIA',decrement:'JIAN'}),
			
			// 借助 mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
			// ...mapMutations(['JIA','JIAN']),
			
			// 借助 mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			// ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
			
			// 借助 mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
			...mapActions(['jiaOdd','jiaWait']),
		},
		mounted(){
			// console.info('Count',this.$store)
			// const x = mapState({sum:'sum',school:'school',subject:'subject'})
			// console.log(x)
			console.info(this.$store)
		}
	}
</script>

<style scoped>
	button{
		margin-left: 10px;
	}
</style>
